<template>
  <div>
    <a-modal
            title="新增房产"
            :width="1000"
            :visible="visible"
            :confirmLoading="confirmLoading"
            @cancel="handleCancel"
            @ok="handleSubmit">
      <div>
      <a-tabs :activeKey="first_tab" @change="activeKeyChange">
           <a-tab-pane key="1" tab="集中式">
               <a-form :form="form1">
                <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
                <a-form-item v-show="false"><a-input v-decorator="['category',{ initialValue: '1'}]" /></a-form-item>
                <a-form-item v-show="false"><a-input v-decorator="['floor',{ initialValue: ''}]" /></a-form-item>
                <h2>房產信息</h2>
                <a-form-item
                  label="房產名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  has-feedback
                >
                  <a-input placeholder="请输入公寓名"  v-decorator="['name', {rules: [{required: true, message: '请输入公寓名'}]}]" />
                </a-form-item>
                 <a-form-item
                    label="房產地址"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="请输入房產地址" v-decorator="['address', {rules: [{required: true, message: '请输入房產地址！'}]}]" />
                  </a-form-item>
                  <a-form-item
                    label="房產類型"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select style="width: 100%" placeholder="请选择房產類型" v-decorator="['houseType', {rules: [{ required: true, message: '请选择房產類型！' }]}]">
                      <a-select-option v-for="(item,index) in houseTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                  label="電梯樓梯配置"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  >
                      <a-radio-group placeholder="请选择计算费用时月天数" v-decorator="['elevator',{ initialValue: 1,rules: [{ required: true, message: '请选择计算费用时月天数！' }]}]">
                        <a-radio  key="0" :value="1">電梯</a-radio>
                        <a-radio  key="1" :value="2">樓梯</a-radio>
                      </a-radio-group>
                </a-form-item>
                <a-divider />
                <a-form-item
                    label="負責人"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="请输入負責人" v-decorator="['principal']" />
                  </a-form-item>
                  <a-form-item
                    label="聯係電話"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="请输聯係電話" v-decorator="['phone']" />
                  </a-form-item>
                  <a-divider />
                  <h2>房間信息</h2>
                  <a-form-item
                    label="樓層數"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select style="width: 100%" placeholder="请選擇樓層數" v-decorator="['floors', { initialValue: 6,rules: [{ required: true, message: '请選擇樓層數' }]}]">
                      <a-select-option v-for="(item,index) in 99" :key="index" :value="item">{{ item }}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-form-item
                    label="每層房間數"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select style="width: 100%" placeholder="请選每層房間數" v-decorator="['rooms', { initialValue: 5,rules: [{ required: true, message: '请選每層房間數' }]}]">
                      <a-select-option v-for="(item,index) in 99" :key="index" :value="item">{{ item }}</a-select-option>
                    </a-select>每層大概房間數，稍後可進行增減
                  </a-form-item>
                  <a-form-item
                    label="房號前綴"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="A1018(A=前綴)" v-decorator="['roompre']" />前綴在保存房產后自動加到房間號前面
                  </a-form-item>
                  <a-form-item
                    label="房號后缀"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="A1018(8=后綴)" v-decorator="['roomsuf']" />后綴在保存房產后自動加到房間號后面
                  </a-form-item>
               </a-form>
            </a-tab-pane>
            <a-tab-pane key="2" tab="分散式">
              <a-form :form="form2">
                <a-form-item v-show="false"><a-input v-decorator="['id']" /></a-form-item>
                <a-form-item v-show="false"><a-input v-decorator="['category',{ initialValue: '2'}]" /></a-form-item>
                <h2>房產信息</h2>
                <a-form-item
                  label="房產名"
                  :labelCol="labelCol"
                  :wrapperCol="wrapperCol"
                  has-feedback
                >
                  <a-input placeholder="请输入公寓名" v-decorator="['name', {rules: [{required: true, message: '请输入公寓名'}]}]" />
                </a-form-item>
                 <a-form-item
                    label="房產地址"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="请输入房產地址" v-decorator="['address', {rules: [{required: true, message: '请输入房產地址！'}]}]" />
                  </a-form-item>
                  <a-form-item
                    label="房產類型"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                  >
                    <a-select style="width: 100%" placeholder="请选择房產類型" v-decorator="['houseType', {rules: [{ required: true, message: '请选择房產類型！' }]}]">
                      <a-select-option v-for="(item,index) in houseTypeData" :key="index" :value="item.code">{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>
                  <a-divider />
                  <a-form-item
                    label="負責人"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="请输入負責人" v-decorator="['principal']" />
                  </a-form-item>
                  <a-form-item
                    label="聯係電話"
                    :labelCol="labelCol"
                    :wrapperCol="wrapperCol"
                    has-feedback
                  >
                    <a-input placeholder="请输聯係電話" v-decorator="['phone']" />
                  </a-form-item>
               </a-form>
            </a-tab-pane>
      </a-tabs>
      </div>
    </a-modal>
  </div>
</template>
<script>
  import { busRealEstateAdd } from '@/api/modular/main/busrealestate/busRealEstateManage'
  export default {
        data () {
          return {
             // 第一步tab索引
            first_tab: '1',
            labelCol: {
              xs: { span: 24 },
              sm: { span: 5 }
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 15 }
            },
            visible: false,
            confirmLoading: false,
            roomTypeData: [],
            memberLoading: false,
            houseTypeData: [],
            form1: this.$form.createForm(this), // 集中式
            form2: this.$form.createForm(this) // 分散式
          }
        },
        created() {
          this.loadData()
        },
        methods: {
          // 初始化方法
          add () {
            this.visible = true
          },
          loadData() {
            const bedroomsOption = this.$options
            this.houseTypeData = bedroomsOption.filters['dictData']('house_type')
          },
          // 关闭弹窗
          handleCancel () {
            this.form1.resetFields()
            this.form2.resetFields()
            this.visible = false
            this.first_tab = '1'
          },
          // 第一步tab点击
          activeKeyChange(key) {
            if (key === '1') {
               this.form2.resetFields()
            } else {
               this.form1.resetFields()
            }
            this.first_tab = key
          },
          /**
           * 提交表单
           */
          handleSubmit () {
            // 集中式房产
            if (this.first_tab === '1') {
              const { form1: { validateFields } } = this
              this.confirmLoading = true
              validateFields((errors, values) => {
                if (!errors) {
                  for (const key in values) {
                    if (typeof (values[key]) === 'object') {
                      values[key] = JSON.stringify(values[key])
                    }
                  }
                  this.submitRealData(values)
                } else {
                  this.confirmLoading = false
                }
              })
            } else {
            // 分散式房产
              const { form2: { validateFields } } = this
              this.confirmLoading = true
              validateFields((errors, values) => {
                if (!errors) {
                  for (const key in values) {
                    if (typeof (values[key]) === 'object') {
                      values[key] = JSON.stringify(values[key])
                    }
                  }
                  this.submitRealData(values)
                } else {
                  this.confirmLoading = false
                }
              })
            }
          },
          submitRealData (values) {
            busRealEstateAdd(values).then((res) => {
              if (res.code === 200) {
                this.$message.success('新增成功')
                this.confirmLoading = false
                this.$emit('ok', values)
                this.handleCancel()
              } else {
                this.$message.error(res.msg)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          }
        }
      }
</script>
<style lang="less">
 .steps-content {
  border-radius: 6px;
  min-height: 500px;
}
.steps-action {
  margin-top: 0px 24px;
  margin-bottom: 20px;
  min-height: 50px;
}
.bt-tt{
  padding: 10px;
  margin-left: 8px;
}
.check_box{
  border: solid 1px rgb(241, 238, 238);
}
.check_box_active{
  border: solid 1px rgb(109, 185, 236);
}
.room_item_lis{
  padding:10px 30px;
}
.room_item_ti{
  padding:0px 10px;
  margin: 5px;
}
.roomadd{
  border: solid 1px rgb(109, 185, 236);
  color: rgb(109, 185, 236);
  height: 40px;
  width: 40px;
  margin-left: 10px;
}
.divider-only{
    background-color: aqua;
    width: 2px;
    height: 1.2em;
  }
  .divider-content-only{
    margin-bottom: 5px;
  }
  .divider-content-center-only{
      margin-top: 5px;
  }
  .ant-modal-body{
    padding: 0px 20px;
  }
</style>
